@import "../../sassmixins/mixins";

html, body {
  height: 100%;
  overflow: hidden;
}

.container {
  @include size(10rem, 100%);
  background-image: url("../image/bg.jpg");
  background-size: 100% 100%;
  position: relative;

  .title {
    @include size(10rem, px2rem-s(189px));
    background-image: url("../image/title.png");
    background-size: 100% 100%;
    position: relative;
    z-index: 11;
  }

  .word {
    margin-top: px2rem-s(29px);
    @include size(px2rem-s(291px), px2rem-s(537px));
    background-image: url("../image/word.png");
    background-size: 100% 100%;
    position: relative;
    z-index: 11;
  }


  .oile-b {
    position: absolute;
    top: 0;
    right: 0;
    @include size(px2rem-s(244px), px2rem-s(645px));
    background-image: url("../image/oile-b.png");
    background-size: 100% 100%;
    z-index: 5;
  }

  .oile {
    position: absolute;
    top: 0;
    right: 0;
    @include size(px2rem-s(446px), px2rem-s(961px));
    background-image: url("../image/oile.png");
    background-size: 100% 100%;
    z-index: 8;
  }
}

.btn {
  position: fixed;
  @include size(px2rem-s(165px), px2rem-s(65px));
  background-image: url("../image/upload.png");
  background-size: 100% 100%;
  bottom: px2rem-s(62px);
  left: px2rem-s(57px);
}